<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>某网上论坛</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
    <div id="page">
        <div id="title_box">
            <div id="title_left">
                <p>主题：物质生活好了，是否就是幸福</p>
            </div>
            <div id="title_right">
                <ul id="functions">
                    <li>
                        <p>[查看回帖统计]</p>
                    </li>
                    <li>
                        <p>[搜索附件帖]</p>
                    </li>
                    <li>
                        <p>[只看楼主]</p>
                    </li>
                    <li>
                        <p>[大字体]</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box">
            <div class="head">
                <div class="name">
                    <p>雪域雄鹰</p>
                </div>
                <div class="head_img">
                    <img alt="head" src="https://iph.href.lu/70x70?text=%E5%A4%B4%E5%83%8F&fg=ffffff&bg=cccccc">
                </div>
                <div class="star">
                    <div class="the_star">
                        <div class="icon"></div>
                    </div>
                </div>
                <div class="information">
                    <div class="icon"></div>
                    <div class="send">
                        <p>
                            发帖：
                            <span class="send_num">113</span>
                            篇
                        </p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p>&emsp;&emsp;物质财富有助于人实现幸福这个目标，但不能把物质财富与人生目标等同。</p>
            </div>
            <div class="else">
                <ul>
                    <li>
                        <p>只看此用户</p>
                    </li>
                    <li>
                        <p>大字体</p>
                    </li>
                    <li>
                        <p>楼主</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box">
            <div class="head">
                <div class="name">
                    <p>小白</p>
                </div>
                <div class="head_img">
                    <img alt="head" src="https://iph.href.lu/70x70?text=%E5%A4%B4%E5%83%8F&fg=ffffff&bg=cccccc">
                </div>
                <div class="star">
                    <div class="the_star">
                        <div class="icon"></div>
                    </div>
                </div>
                <div class="information">
                    <div class="icon"></div>
                    <div class="send">
                        <p>
                            发帖：
                            <span class="send_num">997</span>
                            篇
                        </p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p>&emsp;&emsp;对于财富，要取之有道、用之有度、用之有方。</p>
            </div>
            <div class="else">
                <ul>
                    <li>
                        <p>只看此用户</p>
                    </li>
                    <li>
                        <p>大字体</p>
                    </li>
                    <li>
                        <p>2楼</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box">
            <div class="head">
                <div class="name">
                    <p>东方</p>
                </div>
                <div class="head_img">
                    <img alt="head" src="https://iph.href.lu/70x70?text=%E5%A4%B4%E5%83%8F&fg=ffffff&bg=cccccc">
                </div>
                <div class="star">
                    <div class="the_star">
                        <div class="icon"></div>
                    </div>
                </div>
                <div class="information">
                    <div class="icon"></div>
                    <div class="send">
                        <p>
                            发帖：
                            <span class="send_num">164</span>
                            篇
                        </p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p>&emsp;&emsp;一个人富了，还要想到去帮助更多的人。</p>
            </div>
            <div class="else">
                <ul>
                    <li>
                        <p>只看此用户</p>
                    </li>
                    <li>
                        <p>大字体</p>
                    </li>
                    <li>
                        <p>3楼</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box">
            <div class="head">
                <div class="name">
                    <p>网名</p>
                </div>
<!--                <div class="head_img">-->
<!--                    <img alt="head" src="https://iph.href.lu/70x70?text=%E5%A4%B4%E5%83%8F&fg=ffffff&bg=cccccc">-->
<!--                </div>-->
<!--                <div class="star">-->
<!--                    <div class="the_star">-->
<!--                        <div class="icon"></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="information">-->
<!--                    <div class="icon"></div>-->
<!--                    <div class="send">-->
<!--                        <p>-->
<!--                            发帖：-->
<!--                            <span class="send_num">113</span>-->
<!--                            篇-->
<!--                        </p>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="content">
<!--                <p>&emsp;&emsp;</p>-->
            </div>
            <div class="else">
                <ul>
                    <li>
                        <p>只看此用户</p>
                    </li>
                    <li>
                        <p>大字体</p>
                    </li>
                    <li>
                        <p>&emsp;楼</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="jia-dai-si-huo" style="position: absolute;top: 10px;left: 10px">
    <p>作者FANCC666</p>
    <p>B站link:<a href="https://space.bilibili.com/358578749">点我</a></p>
</div>
<div id="warn" style="display:none;position:absolute;top:338px;left:235px">
    <p style="font-size: 62px;color: red">电脑浏览效果更佳</p>
</div>
<script>
    /**
     * Author: FANCC666
     * 加载头像图片（已编码）
     * 尺寸70 * 70
     */
    let img_list = {
        0: "",
        1: "",
        2: "",
        "change_src": function (index, src) {
            this[index] = src;
        }
    };
    const imgs = document.getElementsByClassName("head_img");
    window.onload = function () {
        for (let i=0;i<imgs.length;i++) {
            imgs[i].firstElementChild.src = img_list[i]
        }
        showWarn();
    };

    /**
     * @return {boolean}
     */
    function IsPC() {
        const userAgentInfo = navigator.userAgent;
        const Agents = ['Android', 'iPhone',
            'SymbianOS', 'Windows Phone',
            'iPad', 'iPod'
        ];
        let flag = true;
        for (let i = 0; i < Agents.length; i++) {
            if (userAgentInfo.indexOf(Agents[i]) !== -1) {
                flag = false;
                break;
            }
        }
        return flag;
    }
    function showWarn() {
        if (!IsPC()) {
            document.getElementById("warn").style.display = "block";
        }
    }
</script>
</body>
</html>
